<template>
  <div class="w-full h-full" v-if="currentQuestion && !currentQuestion.answerScoreable">
    <Stem :index="currentQuestionIndex" :data="stem" />
    <!-- upload -->
    <div class="mt-40px">
      <div class="tips text-333">请拍照上传解答过程和答案</div>
      <div class="camera mt-18px relative" style="font-size: 0" @click="upload">
        <el-image
          class="icon"
          :src="studentAnswerUrl"
          :preview-src-list="[studentAnswerUrl]"
          mode=""
          v-if="studentAnswerStatus"
        />
        <el-image class="icon" :src="Icons.IconCamera" mode="" v-else />
        <img
          class="clear absolute"
          src="static/icons/close-warning.png"
          mode=""
          v-show="studentAnswerStatus"
          @click.stop="clearImage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Stem from '@/components/question/stem/index'
import { mapState } from 'vuex'
import IconCamera from '@/assets/homework/photo@2x.png'
import { uploadImage } from '@/utils'
import { formatQuestionStem, formatQuestionAnswer } from '@/utils/question'

export default {
  components: {
    Stem
  },
  data() {
    return {
      Icons: {
        IconCamera
      }
    }
  },
  computed: {
    ...mapState(['homework']),
    currentQuestionIndex() {
      const { currentHomework = {} } = this.homework
      const { questionIndex } = currentHomework
      return questionIndex
    },
    currentQuestion() {
      const { currentHomework = {} } = this.homework
      const { questions, questionIndex } = currentHomework
      return questions[questionIndex]
    },
    stem() {
      const {
        stem: stemString,
        questionSplit: { stem },
        typeName
      } = this.currentQuestion

      const { type = '未知题型' } = stem ? stem : {}

      return formatQuestionStem(stemString, {
        label: typeName,
        type
      })
    },
    studentAnswerStatus() {
      return this.currentQuestion.localStudentAnswerStatus
    },
    studentAnswerUrl() {
      return 'data:image/png;base64,' + this.currentQuestion.localStudentAnswer.studentAnswerUrl
    }
  },
  mounted() {},
  methods: {
    async upload() {
      if (this.studentAnswerStatus) return

      const { android_call } = window

      if (!android_call) {
        const base64 = await uploadImage()
        const { localStudentAnswer } = this.currentQuestion

        localStudentAnswer.studentAnswerUrl = base64.replace('data:image/png;base64,', '')
        this.currentQuestion.localStudentAnswerStatus = 1
      } else {
        const callback = (base64) => {
          const { localStudentAnswer } = this.currentQuestion

          localStudentAnswer.studentAnswerUrl = base64
          this.currentQuestion.localStudentAnswerStatus = 1
          this.$message.success('上传成功！')
        }

        const callBackName = `fn${new Date().getTime()}`
        window.android_call[callBackName] = callback.bind(this)

        android.takePhoto(callBackName)
      }
    },
    clearImage() {
      const { localStudentAnswer } = this.currentQuestion
      localStudentAnswer.studentAnswerUrl = ''
      this.currentQuestion.localStudentAnswerStatus = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.tips {
  font-size: 26px;
  line-height: 26px;
}

.camera {
  width: 140px;
  height: 140px;
  background: #f6f6f6;
  border-radius: 8px 8px 8px 8px;
  .icon {
    width: 140px;
    height: 140px;
  }

  .clear {
    width: 20px;
    height: 20px;
    right: -6px;
    top: -6px;
  }
}
</style>
